<template>
  <div class="content">
    <NavBar v-if="!navShow||claimsStatusCode!=undefined" goUrl="/claims">
      <template v-if="navShow" slot="right">
        <img
          src="../claims/img/share3.png"
          class="record-detail-nav-right"
          @click="$refs.shareWx.show = true"
        />
      </template>
    </NavBar>
    <ShareWx ref="shareWx" @handleShare="handleShare" />
    <van-form ref="userInfoForm">
      <div class="c-hi306n">
        <div class="c-header-title">
            <p class="c-p-content ">尊敬的客户，您好</p>
            <p class="c-p-content c-p-content-text">为方便协助您咨询理赔，请您填写以下信息并选择对应服务(三选一），我司将在5个工作日内对信息进行审核，如通过审核将为您提供对应服务，帮您争取最大的权益。</p>
      </div>
        <!-- 基础信息 -->
        <div class="c-91t2s9">
          <div class="c-91t2s9-title">一、基础信息</div>
          <div class="c-91t2s9-list">
            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">姓名</div>
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    v-model="claimsCustomer.customerName"
                    name="name"
                    :rules="formRules.nameRules"
                    placeholder="请输入姓名"
                  ></van-field>
                </div>
              </div>
            </div>

            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">手机号码</div>
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    v-model="claimsCustomer.mobile"
                    name="mobile"
                    placeholder="请输入手机号"
                    :rules="formRules.mobileRules"
                  ></van-field>
                </div>
              </div>
            </div>
            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">投保时间</div>
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    :value="claimsCustomer.applicationDate"
                    name="sex"
                    @click="handleVisible('applicationDate')"
                    :rules="claimsRules.applicationDateRules"
                  >
                    <template #input>
                        <PeoBirthday
                          ref="applicationDate"
                          title="选择年月日"
                          @confirm="
                            value =>
                              handleConfirm(
                                value,
                                'applicationDate',
                                'claimsCustomer'
                              )
                          "
                          placeholder="请输入投保时间"
                          :defaultValue="claimsCustomer.applicationDate"
                        />
                      </template>
                  </van-field>
                </div>
                <van-icon name="arrow" class="c-8moxqg-item-left" />
              </div>
            </div>
            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">投保险种</div>
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    v-model="claimsCustomer.riskName"
                    name="birthday"
                    placeholder="请填写投保险种"
                    :rules="claimsRules.riskName"
                  ></van-field>
                </div>
                <!-- <van-icon name="arrow" class="c-8moxqg-item-left" /> -->
              </div>
            </div>

            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">投保金额</div>
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    v-model="claimsCustomer.sumAssured"
                    name="name"
                    :rules="formRules.nameRules"
                    placeholder="请输入投保金额"
                  ></van-field>
                </div>
              </div>
            </div>
            <div
              class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label">申请服务类型</div>
                
                <div class="c-8moxqg-item-value">
                  <van-field
                    class="c-8moxqg-item-value-text"
                    v-model="claimsCustomer.serviceType"
                    name="serviceType"
                    @click="handleVisible('serviceType')"
                    :rules="claimsRules.serviceType"
                  >
                    <!-- 此处需要延迟加载组件，claimsCustomer.serviceType此时值为空，v-if延迟加载 -->
                    <template #input>
                      <PeoInsured
                        
                        ref="serviceType"
                        title="选择服务类型"
                        @confirm="
                          value =>
                            handleConfirm(
                              value,
                              'serviceType',
                              'claimsCustomer'
                            )
                        "
                        placeholder="选择申服务类型"
                        :defaultValue="claimsCustomer.serviceType"
                        :columns="cardList"
                      ></PeoInsured>
                    </template>
                  </van-field>
                </div>
                <van-icon name="arrow" class="c-8moxqg-item-left" />
              </div>
            </div>
            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <span class="c-8moxqg-item-star">*</span>
                <div class="c-8moxqg-item-label court">
                  是否已向银保监投诉或法院起诉
                </div>
                <div class="c-8moxqg-item-value c-8moxqg-item-margin-left">
                  <van-field :rules="formRules.noEmptyRules">
                    <template #input>
                      <van-radio-group
                        class="c-8moxqg-item-value-text"
                        v-model="claimsCustomer.isComplaint"
                        name="isIdLongTerm"
                        direction="horizontal"
                      >
                        <van-radio name="Y">是</van-radio>
                        <van-radio name="N">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 出险信息 -->
        <div class="c-91t2s9">
          <div class="c-91t2s9-title">二、出险信息</div>
          <div class="c-91t2s9-list">
            <div class="c-91t2s9-list-item">
              <div class="c-8moxqg flex-row flex-align-center">
                <van-field
                  v-model="claimsCustomer.description"
                  rows="2"
                  autosize
                  label=""
                  type="textarea"
                  placeholder="请填写出险时间、原因、经过及拒赔理由"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 资料上传 -->
        <div class="c-91t2s9">
          <div class="c-91t2s9-title">三、资料上传</div>
          <div class="c-91t2s9-list">
            <div class="c-91t2s9-list-item">
              <div class="file-upload">
                <div class="upload-title">
                  身份证明(投/被保险人身份证照片或扫描件，正反面)
                </div>
                <div style="margin: 10px 0;">
                  <van-uploader
                    class="c-d921q5-item-upload"
                    v-model="cardFileList"
                    :multiple="true"
                    :after-read="cardupload"
                    :before-delete="beforeDelete"
                    :disabled="claimsStatusCode=='02'||claimsStatusCode==undefined?false:true"
                    :deletable="claimsStatusCode=='02'||claimsStatusCode==undefined?true:false"
                  >
                    <img src="../claims/img/upload.png" width="70" height="70" />
                  </van-uploader>
                </div>
								<div class="upload-title">
                  保险合同（合同正本、投保单电子版照片或扫描件）
                </div>
                <div style="margin: 10px 0;">
                  <van-uploader
                    class="c-d921q5-item-upload"
                    v-model="InsuranceFileList"
                    :multiple="true"
                    :after-read="insurUpload"
                    :before-delete="beforeDelete"
                    :disabled="claimsStatusCode=='02'||claimsStatusCode==undefined?false:true"
                    :deletable="claimsStatusCode=='02'||claimsStatusCode==undefined?true:false"
                  >
                    <img src="../claims/img/upload.png" width="70" height="70" />
                  </van-uploader>
                </div>
                <div class="upload-title">
                  住院或门诊病史（病案首页、入院记录、出院小结、手术记录、诊断说明书、病理报告及本次就诊相关的检查报告）
                </div>
                <div style="margin: 10px 0;">
                  <van-uploader
                    class="c-d921q5-item-upload"
                    v-model="historyFileList"
                    :multiple="true"
                    :after-read="historyUpload"
                    :before-delete="beforeDelete"
                    :disabled="claimsStatusCode=='02'||claimsStatusCode==undefined?false:true"
                    :deletable="claimsStatusCode=='02'||claimsStatusCode==undefined?true:false"
                  >
                    <img src="../claims/img/upload.png" width="70" height="70" />
                  </van-uploader>
                </div>
                <div class="upload-title">
                  保险公司理赔通知书
                </div>
                <div style="margin: 10px 0;">
                  <van-uploader
                    class="c-d921q5-item-upload"
                    v-model="companyFileList"
                    :multiple="true"
                    :after-read="companyUpload"
                    :before-delete="beforeDelete"
                    :disabled="claimsStatusCode=='02'||claimsStatusCode==undefined?false:true"
                    :deletable="claimsStatusCode=='02'||claimsStatusCode==undefined?true:false"
                  >
                    <img src="../claims/img/upload.png" width="70" height="70" />
                  </van-uploader>
                </div>
                <div class="upload-title">
                  其他相关材料
                </div>
                <div style="margin: 10px 0;">
                  <van-uploader
                    class="c-d921q5-item-upload"
                    v-model="otherFileList"
                    :multiple="true"
                    :after-read="otherUpload"
                    :before-delete="beforeDelete"
                    :disabled="claimsStatusCode=='02'||claimsStatusCode==undefined?false:true"
                    :deletable="claimsStatusCode=='02'||claimsStatusCode==undefined?true:false"
                  >
                    <img src="../claims/img/upload.png" width="70" height="70" />
                  </van-uploader>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div class="c-91t2s9">
        <van-checkbox v-model="checked" shape="square" class="c-91t2s9-title">申请人声明</van-checkbox>
        <section class="c-p-text">1.本人确认出险属实，如故意伪造索赔资料，将承担相应的法律责任。</section>
        <section class="c-p-text">2.本人已阅读并接受
        <span class="login-protocol" @click="$router.push({ path: '/claimServiceFee', query: { claimsStatusCode: claimsStatusCode} })">《理赔咨询服务及收费标准》</span>,如成功理赔，将在收到理赔款后3个工作日内缴纳理赔咨询服务费。</section>      
      </div>
      </div>
    </van-form>
    
		<div class="c-xdweug-bottom c-xdweug-bottom-active" v-if="claimsStatusCode=='02'||claimsStatusCode==undefined" @click="handleClick">
			提交
		</div>
  </div>
</template>

<script>
import NavBar from '@/components/h5header'
// import PeoList from '@/components/peoList'
import ShareWx from '@/components/ShareWx'
import weixinShare from '@/services/h5/app-api/weixinShare.js'
import PeoBirthday from '@/components/peoBirthday'
import PeoInsured from '@/components/peoInsured'
import API from '@/services/h5/my'
import { isApp } from '@/utils/platform'
// import phoAPI from '@/services/h5/product'
import comAPI from '@/services/h5/common' 
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
  name: 'claimsConsulting',
  components: {
    NavBar,
    ShareWx,
    PeoBirthday,
    PeoInsured
    // PeoList
    
  },
  
  computed: {
    ...mapGetters('common', ['formRules']),
    ...mapState('product', [
      'PEOPLE_TYPE',
      'appPolicyHolderInfo',
      'appPolicyInsuredList',
      'appPolicyBeneficiaryList',
      'contractId',
      'ids'
    ])
  },
  created() {
    if(isApp) {
      this.navShow = true
    }else{
      this.navShow = false
    }
    if(this.$route.query) {
      this.claimsStatusCode = this.$route.query.claimsStatusCode
      this.userId = this.$route.query.userId
      // console.log(this.claimsStatus,222)
    }
    /* if(this.claimsStatusCode == "02" || this.claimsStatusCode == undefined) {
      this.isDisabled = true
      this.isDeleted = false
    }else {

    } */
    if(this.$route.params && this.$route.params.id) {
      this.init()
    }
    comAPI.getDictListMore({
          codeType: [
            'serviceType'
          ].toString()
        }).then(res => {
          this.cardList = res.data.data[0].codeList
          res.data.data[0].codeList.find(item => {
            if(item.code == this.claimsCustomer.serviceType) {
              this.claimsCustomer.serviceType = item.codeName
            }
          })

        }).catch(err => {
          console.log(err)
        })
    
  },
  mounted() {
    // console.log(this.$refs,this.$refs.serviceType)
  },
  data() {
    return {
      isDisabled:true,
      isDeleted:false,
      userId:'',
      message: '',
			cardFileList: [ ],//身份证照片
      InsuranceFileList: [], //保险合同照片
      historyFileList: [], //历史合同照片
      companyFileList: [], //保险公司理赔
      otherFileList: [], //其他相关材料
      cardList:[],
      idList: [],
      cardIdList: [],
      claimsStatusCode: '',
      claimsCustomer: {},
      detail:{
        name:'ceshi'
      },
      claimsRules: {
        riskName: [{ required: true, message: '请输入投保险种', trigger: 'blur' }],
        moneyRules: [{ required: true, message: '请输入投保金额', trigger: 'blur' }],
        nameRules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        applicationDateRules: [{ required: true, message: '请选择投保时间', trigger: 'blur' }],
        serviceType: [{ required: true, message: '请选择服务类型', trigger: 'blur' }],

      },
      imgUrl: undefined,
      navShow:false,
      checked:false,
    }
  },
	methods: {
    ...mapMutations('loading', ['setLoading', 'setPolicyFiles']),
    
    init() {
      let id  = this.$route.params && this.$route.params.id
      let params = {
        id: id
      }
       API.claimsDetail(params).then(res => {
        this.claimsStatusCode = res.data.data.claimsStatus
        this.claimsCustomer = res.data.data
        this.imgUrl = res.data.data.claimsLogoUrl
        this.checked=true
        // this.cardFileList = this.claimsCustomer.files
        // console.log("this.claimsCustomer",this.claimsCustomer)
        //身份证
        this.claimsCustomer.identityFiles.forEach(item => {
          if(item.filePath) {
            this.cardFileList.push({url:item.filePath,id:item.id})
          }
        })
        //保险合同照片
        this.claimsCustomer.contractFiles.forEach(item => {
          if(item.filePath) {
            this.InsuranceFileList.push({url:item.filePath,id:item.id})
          }
        })
        //历史合同照片
        this.claimsCustomer.historyFiles.forEach(item => {
          if(item.filePath) {
            this.historyFileList.push({url:item.filePath,id:item.id})
          }
        })
        //保险公司理赔
        this.claimsCustomer.noticeFiles.forEach(item => {
          if(item.filePath) {
            this.companyFileList.push({url:item.filePath,id:item.id})
          }
        })
        //其他相关材料
        this.claimsCustomer.otherFiles.forEach(item => {
          if(item.filePath) {
            this.otherFileList.push({url:item.filePath,id:item.id})
          }
        })
        // console.log('this.claimsCustomer:',this.claimsCustomer,this.cardFileList,this.cardIdList)
      }).catch(err => {
        console.log(111,err)
      })
      

    },
    handleShare(val) {
      weixinShare({
        shareType: val,
        titleName: '理赔订单详情',
        describe: '',
        imageUrl: this.imgUrl,
        shareUrl: window.location.href
      })
    },
    handleVisible(type, index) {
      this.$nextTick(function() {
        if (index !== undefined) {
          this.$refs[type][index].visible = true
        } else {
          this.$refs[type].visible = true
        }
      })
      
    },
    handleConfirm(value, prop, data, index) {
      let flag = index !== undefined
      if (flag) {
        this.setArrayField([value, prop, data, index])
        if (prop === 'area') {
          this.setArrayField([value[0], 'province', data, index])
          this.setArrayField([value[1], 'city', data, index])
          this.setArrayField([value[2], 'country', data, index])
        }
      } else {
        this[data][prop] = value
        if (prop === 'area') {
          this.setField(['province', value[0]])
          this.setField(['city', value[1]])
          this.setField(['country', value[2]])
        }
      }
    },
    cardupload(file) {
      let cardType = "1331"
      this.afterRead(file,cardType,this.cardFileList)
      
    },
    insurUpload(file) {
      let cardType = "1332"
      this.afterRead(file,cardType,this.InsuranceFileList)
    },
    historyUpload(file) {
      let cardType = "1333"
      this.afterRead(file,cardType,this.historyFileList)
    },
    // 保险公司理赔通知书
    companyUpload(file) {
      let cardType = "1334"
      this.afterRead(file,cardType,this.companyFileList)
    },
    otherUpload(file) {
      let cardType = "1335"
      this.afterRead(file,cardType,this.otherFileList)
      // console.log('sssssssssssssssssssss：',this.otherFileList)
    },
		afterRead(file,type,list) {
      this.setLoading(true)
      let fileData = new FormData()
      let param = {}
      if(this.$route.params.id) {
        param = {
          businessId: parseInt(this.$route.params.id),
          attachmentType: 133,
          attachmentSubType: type
        }
      }else {
        param = {
          attachmentType: 133,
          attachmentSubType: type
        }
      }
      fileData.append('param', JSON.stringify(param))
      if (!file.length) {
        fileData.append('files', file.file)
      } else {
        for (let i = 0; i < file.length; i++) {
          fileData.append('files', file[i].file)
        }
      }
      let phoList = []
      phoList.push(param)
      API.claimsUpload(fileData).then(res => {
        if (res.data && res.data.code === 1000) {
          // list.push(res.data.data)
          this.idList.push(res.data.data)
          console.log('照片集合：',this.idList,list,res.data.data)
          this.$message.success('上传成功')
        }
      })
    },
		beforeDelete(file, detail) {
      console.log('dfsdfsdsdfsd', detail)
      return new Promise((resolve, reject) => {
        this.$dialog
          .confirm({
            title: '确认删除此张照片吗？'
          })
          .then(() => {
            // console.log('删除照片',file.id)
            if (file.id) {
              API.claimsDelete([{ id: file.id }]).then(res => {
                res.data &&
                  res.data.code === 1000 &&
                  this.$message.success('删除成功')
              })
            }
            resolve()
          })
          .catch(err => {
            this.$message.warning('已取消')
            reject(err)
          })
      })
    },
    //理赔保存
		handleClick() {
			// console.log('点击要提交信息了',this.claimsCustomer)
        let item = this.claimsCustomer
        if(!item.customerName || !item.mobile||!item.applicationDate|| !item.serviceType||!item.riskName||!item.sumAssured||!item.isComplaint) {
          this.$message.error('基础信息未填写完整！')
          return 
        }
        if(!item.description) {
          this.$message.error('出险信息未填写完整！')
          return 
        }
        if(this.cardFileList.length==0) {
          this.$message.error('请上传身份证明！')
          return 
        }
        if(this.InsuranceFileList.length==0) {
          this.$message.error('请上传保险合同！')
          return 
        }
        if(this.historyFileList.length==0) {
          this.$message.error('请上传住院或门诊病史！')
          return 
        }
        if(this.companyFileList.length==0) {
          this.$message.error('请上传保险公司理赔通知书！')
          return 
        }
        if (!this.checked) {
        this.$dialog
          .alert({
            message: '请先阅读并同意申请人声明'
          })
          .catch(() => {})
        return
      }
        let idListstring = this.idList.toString().split(",").map(Number)

        let params = {
          userId:this.userId,
          applicationDate: item.applicationDate,
          claimsStatus: '01',
          customerName: item.customerName,
          description: item.description,
          files: idListstring,
          id: item.id,
          isComplaint: item.isComplaint,
          mobile: item.mobile,
          riskName: item.riskName,
          serviceType: item.serviceType,
          sumAssured: item.sumAssured ,
        }
      API.claimsSave(params).then(res => {
        if(res.data && res.data.code === 1000) {
          this.$message.success('提交成功')
          // this.$router.push('/claims')

          this.$router.push({
            path: '/claimsSuccess'
          })
        }
      }).catch(err => {
        console.log(err)
      })
		}
	}
}
</script>
<style lang="less" scoped src="../claims/index.less"></style>
<style lang="less" scoped>
.record-detail-nav-right {
  width: 18px;
  height: 18px;
}
.c-header-title {
  width: 94%;
  height: 3.5rem;
  margin: auto;
  margin-top: 2%;
  border-style: solid;
  border-color: #f68657;
  border-width: 3px;
  font-size: 16px;
  color: #f68657;
}
.c-p-content {
  margin-block-end: 0.5em;
  margin-left: 3%;
  margin-right: 2%;
  margin-block-start: 0.5em;
}
.c-p-content-text {
  text-indent: 2em;
}
.c-p-text {
  font-size: 14px;
}
.login-protocol {
  color: #09a7fe;
}
.add-form {
  width: 100%;
  border-radius: 4.5px;
}
.add-button {
  width: 100%;
  height: 1.1733rem;
  border-radius: 4.5px;
  border: 1px solid #f68657;
  display: flex;
  justify-content: center;
  align-items: center;
}
.court {
  width: 110px;
}
.upload-title {
  font-size: 13px;
  font-weight: 600;
}
.c-xdweug {
  height: 100%;
  background-color: #fafafa;
  padding-bottom: 20px;
  &-bottom {
    width: 345px;
    height: 50px;
    line-height: 50px;
    border-radius: 4.5px;
    background: @c-color-primary;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    opacity: 0.5;
    margin: 0 auto;
    &-active {
      opacity: 1;
    }
  }
}
</style>
